<template>
  <el-row id="tag-value-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <el-row>
      <el-col :span="12" :offset="12" class="goBack-box">
        <el-button
          id="auditButton"
          class="buttonStyle1"
          @click="goBack()"
          >返回上一页</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-row id="tag-box">
        <label>标签名：<span :style="{'color':tag.tagColour}">{{tag.tagName}}</span></label>
      </el-row>
      <el-table
        id="tag-value-table"
        :data="tagValueList"
        style="width: 100%"
        height="530"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column label="序号" type="index" width="90"> </el-table-column>
        <el-table-column prop="tagValue" label="标签值" width="400">
        </el-table-column>
        <el-table-column prop="tagValueAudit" label="审核状态" width="210">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template slot="header">
            <el-button
              id="auditButton"
              class="buttonStyle1"
              type="success"
              @click="addTagValueButton()"
              >新增标签值</el-button
            >
            <el-button
              id="auditButton"
              class="buttonStyle1"
              type="success"
              @click="auditTagValueButton()"
              >标签值审核</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button size="mini" type="primary"
             @click="updateTagValueButton(scope.row)"
              >编辑标签值</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="deleteTagValueButton(scope.row.tagValueId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog id="tagValueUpdateForm" title="标签修改" :visible.sync="updateDialogFormVisible">
        <el-form :model="tagValueUpdateForm">
          <el-form-item label="标签值">
            <el-input v-model="tagValueUpdateForm.tagValue" placeholder="请输入标签值"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateTagValue">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog id="tagValueAddForm" title="标签值添加" :visible.sync="addDialogFormVisible">
        <el-form :model="tagValueAddForm">
          <el-form-item label="标签名">
            <el-input v-model="tagValueAddForm.tagValue" placeholder="请输入标签值"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
          <el-button type="primary" @click="addTagValue">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog id="tagAuditValueList" title="标签值审核列表" :visible.sync="auditValueDialogFormVisible">
        <el-table
          id="tag-table"
          :data="tagAuditValueList"
          style="width: 100%"
          height="400"
          :header-cell-style="{ background: '#fafafa' }"
        >
          <el-table-column label="序号" type="index" width="90"> </el-table-column>
          <el-table-column prop="tagName" label="标签" width="150">
            <template slot-scope="scope">
              <div :style="{'color':scope.row.tagName}">
                {{ scope.row.tagName}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tagValue" label="标签值" width="150">
            <template slot-scope="scope">
              <div :style="{'color':scope.row.tagValue}">
                {{ scope.row.tagValue}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="250">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="auditValueTag(scope.row.tagValueId)"
                >通过审核</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="sendBackValueAudit(scope.row.tagValueId)"
                >不通过审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
export default {
  name: "TagValue",
  components: {
    Breadcrumb,
  },
  data(){
    return{
      breadcrumb:[
        {name:"标签管理",path:"tag"},
        {name:"所有标签",path:"tag"},
        {name:"标签值设置",path:""},
      ],
      tag:this.$route.params.tag,
      updateDialogFormVisible: false,
      addDialogFormVisible: false,
      auditValueDialogFormVisible:false,
      tagValueList:[],
      tagAuditValueList:{
        tagName:'',
        tagValue:'',
      },
      tagValueUpdateForm:{
        tagValue:'',
      },
      tagValueAddForm:{
        tagValue:'',
      }
    }
  },
  created(){
      this.getTagValue(this.tag.tagId)
      this.getTagValueAuditList()
  },
  methods:{
    getTagValue(tagId){
      this.axios.get("/tagvalue/"+tagId)
        .then(response => {
          if(response.status == 200){
              this.tagValueList = response.data.data;
              console.log(this.tagValueList)
          }
          console.log(this.tagList)
      }).catch(error => alert(error));
    },
    updateTagValueButton(row){
      console.log(row)
      this.updateDialogFormVisible = true
      this.tagValueUpdateForm=Object.assign({},row)//浅拷贝
      console.log(this.tagValueUpdateForm)
    },
    updateTagValue(){
      this.axios.post("/tagvalue/update",{tagValueId:this.tagValueUpdateForm.tagValueId,tagValue:this.tagValueUpdateForm.tagValue})
        .then(response => {
            if(response.status == 200){
                this.hintMessage("修改标签值成功")
                this.refreshProblemList()
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
      this.updateDialogFormVisible = false
    },
    hintMessage(value){
      this.$message({
        showClose: true,
        message: value,
        type: 'success'
      });
    },
    refreshProblemList(){
      this.getTagValue(this.tag.tagId)
      this.getTagValueAuditList()
    },
    deleteTagValueButton(tagValueId){
      this.$confirm('此操作将永久删除该标签值, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteTagValue(tagValueId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    deleteTagValue(tagValueId){
      this.axios.post("/tagvalue/delete",{tagValueId})
        .then(response => {
            if(response.status == 200){
                this.hintMessage("删除标签值成功")
                this.refreshProblemList()
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
    },
    addTagValueButton(){
      this.addDialogFormVisible = true
    },
    addTagValue(){
      if(!this.checkForm())
        return;
      
      this.axios.post("/tagvalue/add",{tagId:this.tag.tagId,tagValue:this.tagValueAddForm.tagValue})
      .then(response => {
          if(response.status == 200){
              this.hintMessage("添加标签值成功")
              this.refreshProblemList()
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
      this.addDialogFormVisible = false
      this.tagValueAddForm={}
    },
    auditTagValueButton(){
      this.auditValueDialogFormVisible = true
    },
    auditTagValue(tagValueId){
      this.axios.post("/tagvalue/audit",{tagValueId:tagValueId})
      .then(response => {
          if(response.status == 200){
              this.hintMessage("标签审核成功")
              this.refreshProblemList()
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
      this.auditDialogFormVisible = false
    },
    getTagValueAuditList(){
      this.axios.get("/tagvalue/auditList/"+this.tag.tagId)
      .then(response => {
          if(response.status == 200){
              this.tagAuditValueList = response.data.data;
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
    },
    auditValueTag(tagValueId){
      this.axios.post("/tagvalue/audit",{tagValueId:tagValueId})
      .then(response => {
          if(response.status == 200){
              this.hintMessage("标签值审核成功")
              this.refreshProblemList()
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
      this.auditValueDialogFormVisible = false
    },
    sendBackValueAudit(tagValueId){
      this.sendBackTagValue(tagValueId)
      this.auditValueDialogFormVisible = false
    },
    sendBackTagValue(tagValueId){
      this.axios.post("/tagvalue/delete",{tagValueId})
        .then(response => {
            if(response.status == 200){
                this.$message({
                  showClose: true,
                  message: "标签值审核已不通过",
                  type: 'warning'
                });
                this.refreshProblemList()
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
    },
    cancelAdd(){
      this.addDialogFormVisible = false
      this.tagValueAddForm={}
    },
    goBack(){
      this.$router.go(-1)
    },
    checkForm(){
      if(!this.tagValueAddForm.tagValue){
          this.$message.error('标签值不能为空！');
          return false;
      }
      return true;
    }
  },
  
};
</script>
<style scoped>
/* 自定义的样式 */
#tag-value-box{
  padding-top: 20px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  /* background-color: #ffffff; */

  background-color: #f6fafb !important;
}
#tag-box{
  padding-left: 30px;
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: #fafafa;
  font-size: 14px;
  /* color: rgb(218, 144, 34); */
}
.buttonStyle1 {
    /* width: 100px; */
    width: auto;
    height: 30px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.goBack-box{
  text-align: right;
  margin-top: -60px;
  margin-bottom: 30px;
}
</style>

<style>
/* 修改element-ui的样式 */
/* .tagType1{
  border: 0px!important;
  font-size: 14px!important;
  height: 30px!important;
  line-height: 30px!important;
  width: 100%;
} */
#tag-value-table .cell{
  text-align: center!important;
}

#tag-value-table th:nth-child(4) .cell,#tag-value-table .el-table__row td:nth-child(4) .cell {
  text-align: left!important;
}
</style>